<template>
	<view class="">
		<view class="progress-container">
		  <view class="progress-bar" :style="{ width: progress + '%' }"></view>
		  <text v-if="showText" class="progress-text">{{ progress }}%</text>
		</view>
		<view class="flex_ac_js bom" v-if="showTitle">
			<text class="title">已学习：{{ learned }}</text>
			<text class="title">总词数：{{ total }}</text>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
      validator(value) {
        return value >= 0 && value <= 100;
      }
    },
	learned: {
		type: Number,
		default: 0
	},
	total: {
		type: Number,
		default: 0
	},
    showText: {
      type: Boolean,
      default: false
    },
	showTitle: {
		type: Boolean,
		default: true
	}
  },
  computed: {
    progress() {
      return this.learned/this.total*100;
    }
  }
};
</script>

<style scoped lang="scss">
.progress-container {
  position: relative;
  width: 100%;
  height: 16rpx;
  background-color: #f3f3f3;
  border-radius: 10px;
  overflow: hidden;

	.progress-bar {
	  height: 100%;
	  background-color: #6ad702;
	  transition: width 0.3s ease-in-out;
	}
	
	.progress-text {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: #333;
	}
}
.bom {
	margin-top: 16rpx;
	
	.title {
		color: $uni-text-color;
		font-size: 24rpx;
	}
}
</style>